<template>
  <div class="permission">
    <div class="operate">
      <div>
        <div style="flex: 0 0 auto">
          <ep-search
              v-model="queryParam.b0102"
              :size="size"
              placeholder="请输入点位名称"
              enter-button="chaxun"
              @search="
                () => {
                  this.findList();
                }
              "
          ></ep-search>
        </div>
        <div style="margin-left: 15px">
          <ep-search
              v-model="queryParam.b0136"
              :size="size"
              placeholder="请输入标签"
              enter-button="搜索"
              @search="
                () => {
                  this.findList();
                }
              "
          ></ep-search>
        </div>
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="refresh.svg"
            @click="
              () => {
                this.flushPage();
              }
            "
        ></ep-button>
        <ep-button
            style="margin-left: 15px"
            size="default"
            icon="add.svg"
            @click="
            () => {
              this.addNodeBatch();
            }
          "
        >批量新增标签
        </ep-button>
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="export.svg"
            @click="exportFile"
        >导出</ep-button>
      </div>

    </div>
    <a-modal
        :title="modalTitle"
        centered
        style="margin-top:100px;"
        width="65%"
        height="80%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <ep-button
          style="margin-left: 15px"
          size="default"
          icon="add.svg"
          @click="
            () => {
              this.addNode();
            }
          "
      >新增标签
      </ep-button>
      <div style="height: 10px"></div>
      <zh-form
          :span="6"
          ref="labelForm"
          :labelCol="{
        xs: {span: 24},
        sm: {span: 8},
      }"
          :wrapperCol="{
        xs: {span: 24},
        sm: {span: 16},
      }"
      >
        <zh-row v-for="(item,index) in labelList" :key="index">
          <zh-input
              :span="22"
              type="text"
              :label="item.label"
              v-model="item.value"
          ></zh-input>
          <a-icon
              class="dynamic-delete-button"
              type="minus-circle-o"
              @click="remove(item.index)"
          />
        </zh-row>

      </zh-form>
    </a-modal>
    <div class="ep-table" style="height: 600px">
      <zh-table
          ref="tableList"
          style="width: 100%"
          :data="tableData"
          height="auto"
          rowId="roleId"
          type="paging"
          :url="tableUrl"
          :columns="tableColumn"
          @checkbox-change="selectChangeEvent"
          @checkbox-all="selectAllEvent"
      >
        <template #filter="{ $panel, column }">
          <input
              type="type"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, true, option)"
          />
        </template>
        <template #b0136_default="{ row }">
          <span v-if="!row.b0136">暂无标签设置</span>
          <div v-else>
            <a-tag color="pink" v-for="(item, index) in row.labelList" :key="index" :color="colors[(index+1)%6 -1]">
              {{ item }}
            </a-tag>
          </div>
        </template>
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content" style="margin-left: 20px;">
                <ep-button @click="edit(row)"  icon="edit.svg" >编辑</ep-button>
              </span>
            <span class="alert-message-content" style="margin-left: 20px;">
                <ep-button @click="del(row)" icon="del.svg" type="danger" >删除标签</ep-button>
              </span>
            <span class="alert-message-content" style="margin-left: 20px;">
                <ep-button @click="delB0101(row)" icon="del.svg" type="danger" >删除点位</ep-button>
              </span>
          </div>
        </template>
      </zh-table>
    </div>
  </div>
</template>
<script>
import modal from "ant-design-vue/es/modal";
import {
  deleteResourceList,
  getB01LabelInfoList,
  getPermissionParams, updateB0136,
} from "@/services/system/whdngxlApi";
import ZhTable from "@/components/zh-table/ZhTable";

const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import {getBatchDict} from "@/services/system/api";
import ColumnManage from "@/components/assembly/columnManage";
import {mapGetters} from "vuex";
import {TreeSelect} from "ant-design-vue";
import commonExcelExport from "@/excel/commExcel";

export default {
  name: "HhLyPhManager",
  components: {
    ZhTable,
    ColumnManage
  },
  computed: {
    ...mapGetters(['size']),
  },
  data() {
    return {
      colors: ['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'],
      dictData: {},
      modalTitle: '',
      labelCol: {sm: {span: 2}, md: {span: 2}, xs: {span: 24}, lg: {span: 2}, xl: {span: 2}, xxl: {span: 2}},
      wrapperCol: {sm: {span: 22}, md: {span: 22}, xs: {span: 24}, lg: {span: 22}, xl: {span: 22}, xxl: {span: 22}},
      queryParam: {
        b0102: '',
        b0136:'',
      },
      formInfo: {},
      tableColumn: [
        { type: "checkbox", width: 50, fixed: "left", visible: true },
        {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号', visible: true},
        {field: "b0102", title: "点位名称", align: "center", visible: true,},
        {field: "b0136", title: "标签", align: "center", slots: {default: 'b0136_default'}},
        {
          field: "operate",
          title: "操作",
          fixed: "right",
          align: "center",
          width: 400,
          slots: {default: "operate",},
          visible: true,
        },
      ],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageNum: 1,
        pageSize: 200,
      },
      tableData: [],
      visible: false,
      loading: false,
      tableUrl: getB01LabelInfoList,
      taskAreaTree: [],
      sqData: [],
      jdData: {},
      SHOW_PARENT,
      labelList: [],
      b0101: -1,
      b0101List: [],
    };
  },
  created() {
    const param = {}
    param.dictFields = 'XZQH'
    this.$http.post(getBatchDict, param).then(res => {
      this.dictData = res.result
    })
    this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });
  },
  mounted() {
    this.findList()
    this.init()
  },
  methods: {
    addNode() {
      if (this.labelList.length === 0) {
        this.labelList.push({label: '标签1', field: 'p0', index: 0,value: ''})
      } else {
        const data = this.labelList[this.labelList.length - 1]
        this.labelList.push({label: '标签' + (data.index + 2), field: 'p' + (data.index + 1), index: data.index + 1,value: ''})
      }
    },
    remove(index){
      this.labelList.splice(index,1)
    },
    init() {

    },
    addNodeBatch(){
      if (this.$refs.tableList.isAllChecked) {
        this.selectionRows = this.$refs.tableList.getCheckboxRecords();
      } else {
        this.selectionRows = this.$refs.tableList.getAllCheckboxRecords();
      }
      if (this.selectionRows.length === 0) {
        modal.warn({ title: "提示", content: "请至少选择一条数据" });
        return;
      }
      this.showOrHide();
      this.selectionRows.forEach(item => {
        this.b0101List.push(item.b0101)
      })
     // this.b0101List=this.selectionRows
      console.log(this.selectionRows)
      console.log(this.b0101List)
    },
    handleOk() {
      if(this.labelList && this.labelList.length > 0){
        let b0136 = ""
        this.labelList.forEach((item,index) =>{
          if(index === 0){
            b0136 = item.value
          }else {
            b0136 = b0136 + ',' + item.value
          }
        })
        const params = {b0101List: this.b0101List,b0136: b0136}
        this.$http.post(updateB0136, params).then(res => {
          if (res.code === 0) {
            modal.info({title: '成功提示', content: '修改成功'});
            this.findList()
          } else {
            modal.info({title: '失败提示', content: '修改失败'});
          }
          this.visible = false
        })
      }

    },
    handleCancel() {
      this.visible = false;
    },
    showOrHide() {
      this.visible = !this.visible;
    },
    // 导出
    exportFile() {
      //this.$refs.xTable.exportData("点位清单",'csv')
      commonExcelExport('labelManager',this.queryParam);
    },
    findList() {
      this.queryParam.pageNum = this.tablePage.currentPage;
      this.queryParam.pageSize = this.tablePage.pageSize;
      this.$refs.tableList.query(this.queryParam)
    },
    delB0101(row){
      this.b0101List= []
      if(!row.b0101&&row.b0101.length<0){
        modal.warn({title: "提示", content: "请选择要删除的点位标签信息"});
      }
      this.b0101List.push(row.b0101)
      modal.confirm({
        title: "确认删除该点位信息吗？",
        onOk: () => {
          this.$loading.show("正在处理数据,请等待...");
          const params = {b0101List: this.b0101List}
          this.$http.post(deleteResourceList, params).then(res => {
            if (res.code === 0) {
              this.$message.info("删除成功");
              this.$loading.hide();
              this.findList()
            }
            this.visible = false
          })
        },
        onCancel: () => {
        },
      });
    },
    del(row) {
      this.b0101List= []
      if(!row.b0101&&row.b0101.length<0){
        modal.warn({title: "提示", content: "请选择要删除的点位标签信息"});
      }
      this.b0101List.push(row.b0101)
      modal.confirm({
        title: "确认删除该点位的标签信息吗？",
        onOk: () => {
          this.$loading.show("正在处理数据,请等待...");
          const params = {b0101List: this.b0101List,b0136: ""}
          this.$http.post(updateB0136, params).then(res => {
            if (res.code === 0) {
              this.$message.info("删除成功");
              this.$loading.hide();
              this.findList()
            }
            this.visible = false
          })
        },
        onCancel: () => {
        },
      });
    },
    flushPage() {
      this.queryParam = {}
      this.findList();
    },
    edit(row) {
      this.b0101List= []
      this.modalTitle = '编辑'
      this.showOrHide();
      this.labelList = []
      this.b0101List.push(row.b0101)
      if (row.labelList && row.labelList.length > 0) {
        row.labelList.forEach((e,index) => {
          this.labelList.push({value: e,label: `标签${index + 1}`,index})
        })
      }

    },
    //复选框事件(保留翻页选中的数据)
    selectChangeEvent({ checked, records, reserves, row }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      // console.log('当前选中的数据行：' + row )
      //勾选选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0) {
          this.selectedRowKeys = records.map((v) => v.aac147);
          this.selectionRows = records;
        } else {
          //aac147集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [
            ...reserves.map((v) => v.aac147),
            ...records.map((v) => v.aac147),
          ];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves, ...records];
        }
      } else {
        //取消选中时
        let aac147Index = this.selectedRowKeys.indexOf(row.aac147);
        if (aac147Index > -1) {
          //删除取消选中删除指定元素aac147
          this.$delete(this.selectedRowKeys, aac147Index);
        }

        let dataIndex = null;
        for (let i = 0; i < this.selectionRows.length; i++) {
          if (this.selectionRows[i].aac147 == row.aac147) {
            dataIndex = i;
            break;
          }
        }
        //删除取消选中的元素整个对象
        this.$delete(this.selectionRows, dataIndex);
      }
    },
    //vxe复选框当前页全选中方法(保留翻页选中的数据)：
    selectAllEvent({ checked, records, reserves }) {
      // console.log(checked ? '勾选事件' : '取消事件')
      // console.log('当前选中的数据：' + records)
      // console.log('翻页时其他页的数据：' + reserves)
      //全选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0) {
          this.selectedRowKeys = records.map((v) => v.aac147);
          this.selectionRows = records;
        } else {
          //aac147集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [
            ...reserves.map((v) => v.aac147),
            ...records.map((v) => v.aac147),
          ];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves, ...records];
        }
      } else {
        //取消全选时,直接将翻页数据赋值，当前页数据不用加上
        this.selectionRows = reserves;
        this.selectedRowKeys = reserves.map((v) => v.aac147);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;

    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;

      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;

        ul {
          padding: 10px;

          li {
            padding: 1px 0;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;

          p {
            flex: 1;
            text-align: center;
            cursor: pointer;

            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }

  .ep-table {
    height: calc(100% - 60px);
  }
}

// /*表格 筛选-输入框*/
// ::v-deep .vxe-table--filter-wrapper {
//   input {
//     background: #002a44;
//     padding-left: 6px;
//     line-height: 32px;
//     box-shadow: none !important;
//     border: none !important;
//   }
// }
</style>
